import React from "react";
import { List, Avatar, Card, Tag, Button } from "antd";
import type { ConsultSession } from "../../types/consult";
import { useNavigate } from "react-router-dom";
import { ROUTES } from "../../constants/routes";
import Layout from "../../components/Layout";

const mockSessions: ConsultSession[] = [
  {
    id: "s1",
    patient: { id: "p1", name: "张三", type: "patient" },
    doctor: { id: "doc1", name: "王医生", type: "doctor", avatar: undefined },
    status: '进行中',
    lastMessage: { id: "m1", sessionId: "s1", senderId: "doc1", senderType: "doctor", type: "text", content: "请问有什么不适？", sendTime: "2024-06-07 09:10" },
    messages: [],
    createdAt: "2024-06-07 09:00",
    updatedAt: "2024-06-07 09:10",
  },
  {
    id: "s2",
    patient: { id: "p1", name: "张三", type: "patient" },
    doctor: { id: "doc2", name: "李医生", type: "doctor" },
    status: '已结束',
    lastMessage: { id: "m2", sessionId: "s2", senderId: "p1", senderType: "patient", type: "text", content: "谢谢医生！", sendTime: "2024-05-21 15:18" },
    messages: [],
    createdAt: "2024-05-21 15:00",
    updatedAt: "2024-05-21 15:18",
  },
];

const ConsultList: React.FC = () => {
  const navigate = useNavigate();
  return (
    <Layout title="我的咨询列表">
      <Card style={{ maxWidth: 700, margin: '0 auto' }}>
      <List
        itemLayout="horizontal"
        dataSource={mockSessions}
        renderItem={item => (
          <List.Item
            actions={[
              <Button type="link" onClick={() => navigate(ROUTES.patient.consultChat.replace(':doctorId', item.doctor.id))}>进入对话</Button>
            ]}
          >
            <List.Item.Meta
              avatar={<Avatar src={item.doctor.avatar} style={{ background: '#1677ff' }}>{item.doctor.name[0]}</Avatar>}
              title={<>{item.doctor.name} <Tag color={item.status === '进行中' ? 'green' : 'default'}>{item.status}</Tag></>}
              description={<span>最新消息：{item.lastMessage?.content || '-'}<span style={{marginLeft:12}}>{item.updatedAt}</span></span>}
            />
          </List.Item>
        )}
      />
      </Card>
    </Layout>
  );
};
export default ConsultList;
